<template>
  <div class="filePreviewContainer">
    <!-- 图片 -->
    <a-image v-if="imgList.indexOf(suffix) > -1" width="200" :src="props.url" />
    <!-- 视频 -->
    <video
      :src="props.url"
      style="width: 2000px; height: 200px"
      v-if="videoList.indexOf(suffix) > -1"
    ></video>
    <!-- 音频 -->
    <audio :src="props.url" v-if="recordList.indexOf(suffix) > -1"></audio>
    <!-- 文档 -->
    <div v-if="docList.indexOf(suffix) > -1">
      文档：<a :href="props.url" target="_blank">点击访问文档</a>
    </div>
  </div>
</template>

<script setup>
  import { onMounted, ref } from 'vue';
  const props = defineProps({
    url: String,
  });

  const suffix = ref('');

  const imgList = [
    'jpg',
    'jpeg',
    'png',
    'gif',
    'bmp',
    'tif',
    'tiff',
    'svg',
    'webp',
    'ico',
  ];

  const videoList = [
    'mp4',
    'avi',
    'mkv',
    'flv',
    'wmv',
    'mov',
    'rmvb',
    '3gp',
    'mpeg',
    'mpg',
    'vob',
  ];

  // https://view.officeapps.live.com/op/view.aspx?src
  const docList = [
    'doc',
    'docx',
    'xls',
    'xlsx',
    'ppt',
    'pptx',
    'pdf',
    'txt',
    'wps',
  ];

  const recordList = ['mp3', 'wav', 'flac', 'aac', 'wma', 'm4a', 'ape'];

  onMounted(() => {
    let arr = props.url.split('.');
    suffix.value = arr[arr.length - 1].toLowerCase();
  });
</script>

<style lang="scss" scoped></style>
